import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import BillDetail from '../BillDetail/index'
import {Caption} from '../index'
import './index.less'

// redux
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as walletInfoActionsFromOtherFile from '@/store/actions/walletinfo' 
/**
 * 类别：组件
 * 功能：银行卡
 */
class BillList extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            showBillOnTop : false,
            accType : this.props.accType,
            billListSum : [],
            billList : [],
            accountStatus : this.props.accountStatus
        }
    }

    componentWillReceiveProps (nextProps) {
        //根据消费账单组装数据
        var billList = nextProps.billList
        this.setState({
            accountStatus: nextProps.accountStatus,
            billList : billList
        });
    }
    componentDidMount() {

        const BillList = this.refs.BillList
        let timeoutId
        let _this =  this;
        function callback() {


                var oDiv = document.getElementById('Ceiling');
                if (!oDiv) {console.log("Ceiling is none");return}
                var divT = oDiv.offsetTop;

                var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                console.log("scrollT:"+scrollT)
                console.log("divT:"+divT)
                if (scrollT + 108 >= divT) {
                    _this.props.walletinfoActions.walletInfoUpdate({
                        Ceiling : true
                    })
                } else if (scrollT + 64 < divT){
                    
                    _this.props.walletinfoActions.walletInfoUpdate({
                        Ceiling : false
                    })
                }
            
        }
        //监听滑动
        window.addEventListener('scroll', function () {
            if (timeoutId) {
                clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(callback, 50)
        }.bind(this), false);
    }

    render() {
        const style = {
            position:'fixed',
            top : '64px',
            width:'100%',
            zIndex:5
        }
        return (
            <div ref="BillList" id="Ceiling">
                {
                    // this.state.accountStatus == 0 ? <div>
                    // {
                        this.state.billList.length > 0 ? (
                            this.state.billList.map( (bill,index) =>{
                                return  <BillDetail billDetail={bill} key={index} accType={this.props.accType}/>
                                
                            } )
                        ) : (
                             <div  className="padding10 align-center font18">
                                <div className="padding10">
                                暂无任何交易信息～
                                </div>
                            </div>
                        )                      
                    // } </div>: <div className="font18 gray" style={{background:'white',borderTop:'1px solid lightgray',padding:'0.2rem 0.1rem'}}>余额账户在开通中，开通后可查看账单</div> 
     
                }
            </div>
            
        )
    }
}


// -------------------redux react 绑定--------------------

function mapStateToProps(state) {
    return {
        walletinfo: state.walletinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
        walletinfoActions: bindActionCreators(walletInfoActionsFromOtherFile, dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BillList)
